import { FC, useLayoutEffect } from "react";
import { Form, Input, Button, message } from "antd";
import logo from "../../assets/images/logo.png";
import { useHistory } from "react-router-dom";

const Login: FC = (props) => {
  const history = useHistory();
  const [form] = Form.useForm();
  console.log("props", props);

  const skipHomePage = () => {
    sessionStorage.token = "token";

    history.push("/");
    window.location.reload();
  };
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  const onFinish = (values: any) => {
    console.log("Success:", values);
    if (values.password === "password" && values.username === "username") {
      skipHomePage();
    } else {
      message.warning({
        content: "用户名或密码输入错误",
        key: "用户名或密码输入错误",
      });
    }
  };
  useLayoutEffect(() => {
    form.setFieldsValue({
      username: "username",
      password: "password",
    });
  }, []);
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  const emptyBtn = () => {
    form.resetFields();
  };
  return (
    <div className="login">
      <div className="login_container">
        <div className="login_logo">
          <img src={logo} alt="" />
        </div>
        <div className="login_title">后台系统登录</div>
        <Form
          {...layout}
          form={form}
          name="basic"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
              {
                pattern: /^[a-zA-Z]{6,10}$/,
                message: "用户名不正确，用户名由6-10位大小写英文组成!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码!",
              },
              {
                pattern: /^[\w!@#$%^&*.]{6,18}$/,
                message: "密码不正确，密码由6-18位数字、英文或特殊字符组成!",
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
            <Button onClick={emptyBtn}>清空</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
